<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>牛牛</title>
    <link href="{{ url_for('static', path='css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', path='css/bootstrap.rtl.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', path='css/bootstrap-grid.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', path='css/bootstrap-grid.rtl.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', path='css/bootstrap-reboot.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', path='css/bootstrap-reboot.rtl.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', path='css/bootstrap-utilities.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', path='css/bootstrap-utilities.rtl.min.css') }}" rel="stylesheet">
    <script src="{{ url_for('static', path='js/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ url_for('static', path='js/bootstrap.esm.min.js') }}"></script>
    <script src="{{ url_for('static', path='js/bootstrap.min.js') }}"></script>
</head>
<body>
<div class="container text-center">
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

</body>
<script>
    let card_point_list = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K']


    let diamond_svg = `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m19 12l-7 10l-7-10l7-10"/></svg>`
    let club_svg = `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2c2.3 0 4.3 2 4.3 4.2a4.45 4.45 0 0 1-2.26 3.8c1-.5 2.46-.5 2.46-.5c2.5 0 4.5 1.8 4.5 4.3S19 18 16.5 18c0 0-1.5 0-3.5-1c0 0-.3 2 2 5H9c2.3-3 2-5 2-5c-2 1-3.5 1-3.5 1C5 18 3 16.3 3 13.8s2-4.3 4.5-4.3c0 0 1.46 0 2.46.5c-.3-.17-2.17-1.23-2.26-3.8C7.7 4 9.7 2 12 2"/></svg>`
    let heart_svg = `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"/></svg>`
    let spade_svg = `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C9 7 4 9 4 14c0 2 2 4 4 4c1 0 2 0 3-1c0 0 .32 2-2 5h6c-2-3-2-5-2-5c1 1 2 1 3 1c2 0 4-2 4-4c0-5-5-7-8-12"/></svg>`

    let card_row_option_list = [
        {
            "name": "diamond",
            "color": "outline-danger",
            "svg": diamond_svg
        },
        {
            "name": "club",
            "color": "outline-secondary",
            "svg": club_svg
        },
        {
            "name": "heart",
            "color": "outline-danger",
            "svg": heart_svg
        },
        {
            "name": "spade",
            "color": "outline-secondary",
            "svg": spade_svg
        },
    ]

/**
    function create_div(class_name, attr) {
        let div = document.createElement('div')
        div.className = class_name
        if (attr) {
            for (let attrKey in attr) {
                div.setAttribute(attrKey, attr[attrKey])
            }
        }
        return div
    }

    function create_button(color, inner_html, id, data_value) {
        let check = document.createElement('input')
        check.className = 'btn-check card-option'
        check.setAttribute('type', 'checkbox')
        check.setAttribute('autocomplete', 'off')
        check.value = data_value
        check.id = id
        let label = document.createElement('label')
        label.className = `btn btn-${color}`
        label.innerHTML = inner_html
        label.setAttribute("for", id)
        return [check, label]
    }

    let counter = 0
    for (let j = 0; j < card_point_list.length; j++) {
        let row_div = create_div("row mb-2 mt-2")
        let btn_group_div = create_div('btn-group', {'role': 'group'})
        for (let i = 0; i < card_row_option_list.length; i++) {
            let btn = create_button(
                card_row_option_list[i].color,
                `${card_row_option_list[i].svg}${card_point_list[j]}`,
                `${card_row_option_list[i].name}-${card_point_list[j]}`,
                '' + counter
            )
            row_div.append(btn_group_div)
            btn_group_div.append(...btn)
            counter++
        }
        document.getElementById('buttons-container').append(row_div)
    }
**/
</script>
</html>